<template>
  <div class="patrol-detail">
    <div v-for="(item, index) in elementList" :key="index">
      <div class="title">
        <span>{{ index + 1 }}.</span>{{ item.d0803 }}：
      </div>
      <a-radio-group  v-model="item.d1002" direction="horizontal">
        <a-radio
            v-for="(el, elIndex) in item.d09VOList || []"
            :key="elIndex"
            :value="String(el.d0901)"
        >{{ el.d0902 }}</a-radio
        >
      </a-radio-group>
    </div>

     <div class="title">
      <span>{{ elementList.length + 1 }}.</span>健康异常描述：
    </div>
    <div class="desc">{{ this.form2|| "--" }}</div>
    <template v-if="imgList.length">
      <div class="title">
        <span>{{ elementList.length + 2 }}.</span>现场情况：
      </div>
      <ul class="photograph">
        <li v-for="(item, index) in imgList || []" :key="index">
          <img :src="item.src" @click="checkView(item)" />
          <p @click="exportFile(item)">文件下载</p>
        </li>
      </ul>
    </template>

    <a-modal
        title="视频"
        v-model="videoShow"
        centered
        width="880px"
        destroyOnClose
        :footer="null"
    >
      <div class="ry-video-wrap">
        <video ref="videoPlayer" class="video-js">
          <p class="vjs-no-js">不支持播放</p>
        </video>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getPatrolDetail,getSpecialTaskForm } from "@/services/system/whdngxlApi";
import fileType from "@/mixins/fileType.js";
export default {
  name: "PatrolChildDetail",
  mixins: [fileType],
  data() {
    return {
      elementList: [],
      orginList: [],
      form1: {},
      form2: '',
      imgList: [],
      videoShow: false,
    };
  },
  mounted() {},
  methods: {
    initData(data) {
      this.$nextTick(() => {
        if (data) {
          this.getElementList(data);
        }
      });
    },
    getElementList(data) {
      debugger

      this.$http
        .post(getSpecialTaskForm, { busiBigFlag: "02", b0101:data.b0101,d0401: data.d0401,show:true })
        .then((res) => {
          debugger
          if (!res.result) return;
          debugger
          this.handleList(res.result || []);

        });
    },
    handleList(list) {
      debugger
      if (!list.length) return;
      list = list.map((el) => {
        this.form1 = el.form1||{};
        if(el.d0803==="健康异常描述"){
          this.form2=el.d1002
        }
        if (el.d0802 === "5") {
          el.d1002 = el.d1002 ? el.d1002.split(",") : [];
        }
        if (el.d0802 === "6") {
          if (el.materialList && el.materialList.length) {
            this.getImgList(el.materialList);
            el.d1002 = el.materialList.map((hl) => {
              return {
                ...this.getFileType(hl.showId, hl.fileSuffix),
                ...hl,
              };
            });
          } else {
            el.d1002 = [];
          }
        }
        if (el.d0802 === "7") {
          el.d1002 = el.d1002 ? el.d1002.split(",") : [];
        }
        // 单选类型
        if (el.d0802 === '4') {
          el.d09VOList.forEach(item => {
            if (item.d0903) el.d1002 = String(item.d0901)
          })
        }
        // if(el.d0803!=="健康异常描述"&&el.d0803!=="现场情况"){
        //   return {
        //     ...el,
        //     show: true
        //   };
        // }
        return {
          ...el,
          show: true
        };
      });

      list = list.filter((hl) => {
    if(hl.d0803!=="健康异常描述"&&hl.d0803!=="现场情况"){
          return {
            ...hl,
            show: true
          };
        }
      })

      this.orginList = JSON.parse(JSON.stringify(list));
      this.elementList = list;
    },

    getImgList(list) {
      if (!list.length) return;
      this.imgList = list.map((el) => {
        return {
          ...this.getFileType(el.showId, el.fileSuffix),
          ...el,
        };
      });
    },
    // 查看图片或视频
    checkView(item) {
      if (item.type === "image") {
        this.$viewerApi({
          images: [item.src],
        });
      } else if (item.type === "video") {
        this.videoShow = true;
        this.$nextTick(() => {
          this.createVideo(item.showId);
        });
      }
    },
    createVideo(id) {
      let src =
        process.env.VUE_APP_FILE_BASE_URL + `/api/common/file/show/whdn/` + id;
      let options = {
        autoplay: false,
        controls: true,
        sources: [
          {
            src,
            type: "video/mp4",
          },
        ],
      };
      this.$video(this.$refs.videoPlayer, options);
    },
    // 文件下载
    exportFile(item) {
      let a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", true); // download属性
      a.setAttribute("target", "_blank"); // download属性
      a.setAttribute(
        "href",
        `${process.env.VUE_APP_FILE_BASE_URL}/api/common/file/show/whdn/${item.showId}`
      ); // href链接
      a.click(); // 自执行点击事件
      document.body.removeChild(a);
    },
  },
};
</script>

<style lang="less" scoped>
.patrol-detail {
  max-height: calc(100vh - 280px);
  overflow: auto;
  .title {
    padding: 10px 0;
    font-size: 16px;
  }
  .desc {
    width: 80%;
    min-height: 96px;
    line-height: 24px;
    padding: 8px;
    border: 1px solid #3e9fc8;
    border-radius: 8px;
  }
  .photograph {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    li {
      flex: 0 0 auto;
      width: 120px;
      margin-right: 15px;
      margin-bottom: 15px;
      img {
        width: 120px;
        height: 90px;
        margin-right: 15px;
        margin-top: 15px;
        border-radius: 8px;
        cursor: pointer;
      }
      p {
        width: 120px;
        margin-top: 10px;
        color: #1492ff;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="less">
.ry-video-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>